<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口以支持响应式设计 -->
    <title>预防冠状病毒需要做到这六条</title>
    <style>
        * {
            margin: 0; /* 清除所有元素的默认外边距 */
            padding: 0; /* 清除所有元素的默认内边距 */
        }

        body {
            font-family: "黑体", sans-serif; /* 设置全局字体 */
        }

        #page {
            width: 567px; /* 设置页面宽度 */
            border: 1px solid #869dfe; /* 添加边框 */
            margin: 0 auto; /* 居中页面 */
            padding: 20px; /* 添加内边距，使内容不贴边 */
        }

        h3 {
            color: #7b54db; /* 设置标题颜色 *
            font-size: 25px; /* 增大标题字体大小 */
            font-weight: bold; /* 加粗标题 */
        }

        .title {
            font-size: 38px; /* 设置标题字体大小 */
            color: #00004f; /* 设置标题颜色 */
            font-weight:bolder;/* 加粗文本 */
            text-indent: 20px; /* 设置缩进 */
        }

        .highlight {
            color: red; /* 高亮文本颜色 */
            font-weight: bolder; /* 加粗高亮文本 */
            font-size: 40px; /* 增大高亮文本字体大小 */
        }

        .subtitle {
            color: #7b54db; /* 副标题颜色 */
            font-weight: bolder; /* 加粗副标题文本 */
            font-size: 40px; /* 增大副标题字体大小 */
            text-indent: 20px; /* 设置缩进 */
        }

        ul {
            list-style-type: none; /* 去掉列表项的默认样式 */
            margin: 10px; /* 设置列表外边距 */
            padding-left: 0; /* 去掉列表的默认内边距 */
        }

        li {
            height: 51px; /* 列表项高度 */
            background: url("images/b.jpg") no-repeat; /* 列表项背景图 */
            line-height: 50px; /* 行高，确保文本垂直居中 */
            text-indent: 4px; /* 文本缩进，留出空间给圆圈 */
            color: white; /* 列表项文本颜色 */
            font-size: 23px; /* 列表项字体大小 */
            padding-left: 40px; /* 为圆圈留出空间 */
            position: relative; /* 设置相对定位，以便绝对定位子元素 */
            font-weight:600; /* 加粗 */
        }

        .circle {
            width: 30px; /* 圆圈宽度 */
            height: 30px; /* 圆圈高度 */
            display: flex; /* 设置为行内块元素 */
            text-align: center; /* 文本居中对齐 */
            justify-content: center;
            align-items: center;
            background: url(images/c.jpg) no-repeat center center; /* 圆圈背景图，居中显示 */
            position: absolute; /* 绝对定位，使其相对于li定位 */
            left: 10px; /* 左侧间距 */

            top: 50%; /* 垂直居中位置基准线为50%高度位置*/
            transform: translateY(-50%); /* 向上移动一半高度实现垂直居中*/
        }

        .circle-number {
            font-size: 16px; /* 圆圈内数字字体稍微小一点 */
        }

        #footer {
            height: 40px; /* 页脚高度 */
            text-align: center; /* 文本居中对齐 */
            line-height: 40px; /* 行高，确保文本在页脚中垂直居中 */
            background-color: #869dfe; /* 页脚背景颜色 */
            font-weight: bold; /* 加粗字体 */
            color: white; 
        }
    </style>
</head>

<body>
    <div id="page">
        <img src="images/a.jpg" alt="预防冠状病毒" style="width:100%;"> <!-- 添加alt属性以提高可访问性 -->
        <h3>中国疾控中心权威提示</h3>
        <p><span class="title">预防</span><span class="highlight">冠状病毒</span></p>
        <p><span class="subtitle">需要做到这</span><span class="highlight">六条</span></p>
        <ul>
            <li><span class="circle"><span class="circle-number">01</span></span>勤洗手，保持手卫生</li>
            <li><span class="circle"><span class="circle-number">02</span></span>保持良好的呼吸道卫生习惯</li>
            <li><span class="circle"><span class="circle-number">03</span></span>做好通风和清洁</li>
            <li><span class="circle"><span class="circle-number">04</span></span>佩带口罩</li>
            <li><span class="circle"><span class="circle-number">05</span></span>出现呼吸道感染症状及时就医</li>
            <li><span class="circle"><span class="circle-number">06</span></span>不要接触健康情况不明的动物</li>
        </ul>
        <div id="footer">
            中国疾控中心
        </div>
    </div>
</body>
</html>